<template>
	<view>
		<u-row gutter="16" class="u-skeleton">
			<u-col span="6" v-for="item in goodsList.length !== 0 ? goodsList : 0">
				<navigator :url="'/pages/goods/show?id=' + item.goods_id" class="goods-item">
					<u-image class="u-skeleton-fillet" width="100%" height="300rpx" :src="item.goods.cover_url"></u-image>
					<view class="title u-line-1 u-skeleton-rect">{{item.goods.title ? item.goods.title : "商品名称"}}</view>
					<view class="u-flex u-row-between">
						<view class="price u-skeleton-rect">￥ {{item.goods.price}}</view>
					</view>
				</navigator>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsList: [],
			}
		},
		onLoad() {
			this.getData()
		},
		onShow(){
			this.getData()
		},
		methods: {
			async getData() {
				const res = await this.$u.api.userCollect()
				if(res.data[0]){
					this.goodsList = res.data
				}
				
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods-item {
		padding: 40rpx;
		margin-top: 30rpx;
		box-shadow: 0 12rpx 20rpx 0 rgba(0, 0, 0, 0.1);
		box-sizing: border-box;

		.title {
			margin: 20rpx 0;
			font-weight: bold;
			font-size: 32rpx;
			width: 100%;
		}

		.price {
			color: red;
			width: 40%;
		}

		.sales {
			color: #888;
			width: 40%;
		}
	}
</style>
